<template>
	<div>
		<el-table
			ref="multipleTable"
			:data="tableData"
			tooltip-effect="dark"
			style="width: 1500px; margin-left: 30px;"
		>
			<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column label="编号" type="index" width="120" :index="indexMethod"></el-table-column>

			<el-table-column label="题干" width="120">
				<template slot-scope="scope">{{ scope.row.filltopic }}</template>
			</el-table-column>

			<el-table-column label="题型" width="120">
				<template slot-scope="scope">{{ scope.row.typenum | getTypeNum }}</template>
			</el-table-column>

			<el-table-column label="创建时间">
				<template slot-scope="scope">{{ scope.row.createtime }}</template>
			</el-table-column>

			<el-table-column label="操作">
				<el-button type="primary" size="default">查看</el-button>
				<el-button type="primary" size="default">修改</el-button>
			</el-table-column>

			<el-table-column label="删除文件">
				<el-button type="primary" size="default" class="delete">删除</el-button>
			</el-table-column>
		</el-table>
		<el-pagination
			layout="prev, pager, next"
			:total="49"
			:page-sizes="pageSizes"
			:page-size="10"
			class="pagination"
			@current-change="handleCurrentChange"
			>
		</el-pagination>
	</div>
</template>

<script>
export default {
	data() {
		return {
			tableData: [],
			multipleSelection: [],
			pageSizes: [],
		};
	},
	filters: {
		getTypeNum(val) {
			if (val === 1) {
				return "填空题";
			} else if (val === 2) {
				return "选择题";
			} else {
				return "简答题";
			}
		}
	},
	created() {
		// 调用方法 获取试题列表
		this.getQuestionList(this.pageNum, this.pageSize);
	},

	methods: {
		// 页码的变化
		handleCurrentChange(val) {
			// val 就是点击的页面
			// 获取试题列表
			this.getQuestionList(val);
		},
		// 获取试题列表
		getQuestionList( pageNum = 1, pageSize = 10 ) {
		this.pageNum = pageNum;
		this.pageSize = pageSize;
		this.$axios
			.get(`/system/sqTestpaperstable/selectAlltopic?pageNum=${pageNum}&pageSize=${pageSize}`)
			.then((res) => {
				// 获取数据成功
				if (res.data.code === 1) {
					this.total = res.data.data.total;
					this.tableData = res.data.data.pageInfo;
				}
			})
			.catch((err) => {
				// 获取数据失败
				console.log(err);
			});
		},
		indexMethod(index) {
			// 0*10 + index 1 pageNum-1  pageSize
			// 1*10 + index 2 pageNum-1
			// 2*10 + index 3
			return (this.pageNum - 1) * this.pageSize + (index + 1);
		}
	}
};
</script>

<style>
.el-table {
	margin-top: 20px;
}
.delete {
	background-color: #f9463f;
	border: none;
}
</style>
